<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>promise</title>
  </head>
  <body>
    <div></div>
    <script>
      //模拟回调地狱
      // setTimeout(
      //   function (name) {
      //     let catList = name + ","
      //     setTimeout(
      //       function (name) {
      //         catList += name + ","
      //         setTimeout(
      //           function (name) {
      //             catList += name
      //             console.log(catList)
      //           },
      //           200,
      //           "Lion"
      //         )
      //       },
      //       200,
      //       "Jaguar"
      //     )
      //   },
      //   200,
      //   "Panther"
      // )
      function promiseFn1() {
        const p = new Promise(function (resolve, reject) {
          //做一些异步操作
          setTimeout(function () {
            resolve("成功数据1")
          }, 2000)
        })
        return p
      }
      function promiseFn2() {
        const p = new Promise(function (resolve, reject) {
          //做一些异步操作
          setTimeout(function () {
            resolve("成功数据2")
          }, 2000)
        })
        return p
      }
      function promiseFn3() {
        const p = new Promise(function (resolve, reject) {
          //做一些异步操作
          setTimeout(function () {
            resolve("成功数据3")
          }, 2000)
        })
        return p
      }
      promiseFn1() //通过 Promise 链式调用的方式
        .then(function (res) {
          //数据处理
          console.log(res)
          return promiseFn2(res)
        })
        .then(function (res) {
          console.log(res)
          return promiseFn3()
        })
        .then(function (res) {
          console.log(res)
        })
    </script>
  </body>
</html>
